import 'package:flutter/material.dart';

const TAG = 'SHRINE';

class HeroNew extends StatefulWidget {
  final tag;

  const HeroNew({Key key, this.tag}) : super(key: key);

  @override
  _HeroNewState createState() => _HeroNewState();
}

class _HeroNewState extends State<HeroNew> with TickerProviderStateMixin {
  RelativeRectTween rectTween;
  Animation<RelativeRect> animation;
  AnimationController controller;
  var isClosed=true;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
     controller =
        new AnimationController(vsync: this, duration: Duration(milliseconds: 300));
    rectTween = RelativeRectTween(
      begin: RelativeRect.fromLTRB(250,0,250,0),
      end: RelativeRect.fromLTRB(
        0.0,
        0.0,
        0.0,
        0.0,
      ),
    );
    animation = rectTween.animate(controller);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        centerTitle: true,
        title: const Text(TAG),
      ),
      body: Column(
//        children: <Widget>[
//          Column(
//            children: <Widget>[
//              InkWell(
//                onTap: () {
//                  if(isClosed){
//                    controller.forward();
//                    isClosed=false;
//                  }else{
//                    controller.reverse();
//                    isClosed=true;
//                  }
//                },
//                child: Container(
//                  width: 250,
//                  height: 65,
//                  child: Padding(
//                    padding: EdgeInsets.all(0),
//                    child: Card(
//                      elevation: 5,
//                      color: Colors.white,
//                      shape: RoundedRectangleBorder(
//                          borderRadius: BorderRadius.all(Radius.circular(3))),
//                    ),
//                  ),
//                ),
//              ),
//              Stack(
//                children: <Widget>[
//                  Container(
//                    height: 250,
//                    width: 250,
//                  ),
//                  PositionedTransition(
//                      rect: animation,
//                      child: Card(
//                        elevation: 5,
//                        color: Colors.white,
//                        shape: RoundedRectangleBorder(
//                            borderRadius: BorderRadius.all(Radius.circular(3))),
//                      ))
//                ],
//              ),
//            ],
//          ),
//        ],
        children: _addCard(),
      ),
    );
  }

  _addCard() {
    List<Widget> cards = List();
    for (int i = 0; i < 3; i++) {
      cards.add(Column(
        children: <Widget>[
          InkWell(
//            onTap: () {
//              if(isClosed){
//                controller.forward();
//                isClosed=false;
//              }else{
//                controller.reverse();
//                isClosed=true;
//              }
//            },
            child: Container(
              width: 250,
              height: 65,
              child: Padding(
                padding: EdgeInsets.all(0),
                child: Card(
                  elevation: 5,
                  color: Colors.white,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(Radius.circular(3))),
                ),
              ),
            ),
          ),
          Stack(
            children: <Widget>[
              Container(
                height: 250,
                width: 250,
              ),
              PositionedTransition(
                  rect: animation,
                  child: Card(
                    elevation: 5,
                    color: Colors.white,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.all(Radius.circular(3))),
                  ))
            ],
          ),
        ],
      ));
    }
    return cards;
  }
}
